<template>
    <div class="select-sex">
        <!-- 顶部背景图片 -->
        <div class="top-background">
            <img src="../assets/top.png" class="img-top">
            <div class="title">抽取纸条</div>
        </div>
        <!-- 抽取纸条 -->
        <div class="extract">
            <div class="warn">可选择根据省市区来匹配，不选则全国随机</div>
            <!-- 选择地址 -->
            <div class="adress-select" @click="showModal">
                <img src="../assets/address.png" class="address-icon">
                <span class="address-warn" v-if="isSelected">请选择地址</span>
                <span class="address-warn" v-else>{{ selectedOptions[0] }} / {{ selectedOptions[1] }}</span>
            </div>
            <!-- 省市区 -->
            <el-drawer
                v-model="drawer"
                title="请选择地址"
                :direction="direction"
                :before-close="handleClose"
            >
                <el-cascader
                    size="large"
                    :options="pcTextArr"
                    v-model="selectedOptions">
                </el-cascader>
            </el-drawer>

            <!-- 获取一张纸条 -->
            <div class="gain" @click="gain">
                获取一张纸条 ￥1.00
            </div>
            <!-- 提示 -->
            <div class="tip">仅需1元，即可邂逅美好的TA</div>
            <!-- 提交 -->
            <div class="summit">
                <span class="summit-item" @click="back">返回上一步</span>
                <span class="summit-item put" @click="putShowMadel">放入一张纸条</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
// 引入element-china-area-data
import { pcTextArr } from "element-china-area-data";

// 引入props
import { defineProps, ref } from 'vue';


const drawer = ref(false)
const direction = ref('btt')
// 是否选择省市区
const isSelected = ref(true);
const selectedOptions = ref([]);
// 接收父组件传来的数据
const props = defineProps({
    setShowMale: Function,
    showLoading: Function,
    hideLoading: Function,
    changeAddress: Function,
});
// 选择地址
const selectAddress = ref('')

const handleClose = (done) => {
    ElMessageBox.confirm('确认选择此地点吗？', '提示')
    .then(() => {
        done()
        // 隐藏选择地址
        isSelected.value = false;
        selectAddress.value = selectedOptions.value[0] + selectedOptions.value[1];

    })
    .catch(() => {
        // catch error
    })
}
const showModal = () => {
    drawer.value = true;
}
// 点击返回上一步
const back = () => {
    // 关闭抽卡页面, 回到选择性别页面
    props.setShowMale('male');
}
// 点击放入一张纸条
const putShowMadel = () => {
    props.setShowMale('put');
}


// 获取·1张纸条
const gain = async () => {
    // 显示加载动画
    props.showLoading();
    props.changeAddress(selectAddress);
    // 等待2秒后隐藏加载动画
    setTimeout(() => {
        // 隐藏加载动画
        props.hideLoading();
        // 展示抽卡页面
        props.setShowMale('open');
    }, 2000);

}

</script>

<style scoped>
.select-sex {
    width: 80%;
    /* height: 316.4px; */
    height: auto;
    background-color: #fff;
    border-radius: 15px;
    position: relative; /* 相对定位 */
}

.top-background {
    position: relative; /* 相对定位 */
}

.img-top {
    width: 80%;
    height: auto;
    z-index: -1;
}

.title {
    position: absolute; /* 绝对定位 */
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 90%;
    font-weight: bold;
}

/* 抽取纸条 */
.extract {
    position: relative; /* 相对定位 */
}
.warn {
    font-size: 12px;
    color: #a1a1a1;
}
/* 选择地址 */
.adress-select {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f1edfc;
    width: 70%;
    height: auto;
    padding: 15px;
    border-radius: 25px;
    margin: 15px auto;
}

.address-warn {
    font-size: 14px;
    color: #a1a1a1;
    margin-left: 10px;
}
.address-icon {
    width: 13px;
    height: 13px;
}

/* 获取一张纸条 */
.gain {
    font-weight: 700;
    padding: 15px;
    background-color: #ffd800;
    width: 70%;
    height: auto;
    border-radius: 25px;
    margin: 10px auto;
}

/* 提示 */
.tip {
    color: #a1a1a1;
    font-size: 12px;
    margin-top: 10px;
}
/* 提交 */
.summit {
    display: flex;
    justify-content: space-evenly;
}
.summit-item {
    color: #a1a1a1;
    font-size: 12px;
    margin-top: 25px;
    margin-bottom: 25px;
}
.put {
    color: #ffd800;
}
</style>